<template>
  <div class="app-container">
    <el-dialog
      v-model="dialogVisible"
      title="选择用户"
      width="40%"
      :show-close="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      v-dialog-drag
    >
      <el-form :inline="true" label-position="left" label-width="70px">
        <el-form-item>
          <el-input
            style="width: 100%"
            v-model="queryParams.mobile"
            placeholder="输入手机号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="text" @click="handleQuery">查询</el-button>
        </el-form-item>
        <div style="float: right">
          <el-button type="primary" @click="handleAddUser">批量导入</el-button>
          <el-button @click="handleDelUser">批量删除</el-button>
        </div>
      </el-form>
      <el-table
        ref="multipleTableRef"
        :data="list"
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column prop="mobile" label="手机号" />
        <el-table-column prop="nickName" label="用户名" />
      </el-table>
      <pagination
        v-show="queryParams.total > 0"
        :total="queryParams.total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSureUser">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 用户导入对话框 -->
    <import-file
      ref="importRef"
      apiUrl="/cj-stadium/sys/coupon/user/downloadTemplate"
      @success="handleQuery"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { couponUserPage, deleteCouponsUser } from "@/api/coupon/coupon"
import importFile from "@/components/common/importFile.vue"
import { ElMessage, ElMessageBox } from 'element-plus'

// 定义 emits
const emit = defineEmits(['refreshShow'])

// 定义响应式数据
const dialogVisible = ref(false)
const loading = ref(false)
const list = ref<any[]>([])
const multipleSelection = ref<any[]>([])
const couponsTotal = ref<number | null>(null)
const multipleTableRef = ref<InstanceType<typeof importFile> | null>(null)
const importRef = ref<InstanceType<typeof importFile> | null>(null)

const queryParams = reactive({
  couponId: null as number | null,
  pageNum: 1,
  pageSize: 10,
  total: 0,
  mobile: ""
})

// 加载数据
const init = (val: any) => {
  dialogVisible.value = true
  multipleSelection.value = []
  queryParams.couponId = val.couponId
  queryParams.pageNum = 1
  couponsTotal.value = val.limitUserTotal
  handleQuery()
}

// 获取用户列表
const getList = async () => {
  loading.value = true
  try {
    const res = await couponUserPage(queryParams)
    list.value = res.rows
    queryParams.total = res.total
  } finally {
    loading.value = false
  }
}

// 查询用户
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

// 添加用户
const handleAddUser = () => {
  if (importRef.value) {
    importRef.value.upload.open = true
    importRef.value.upload.title = "用户导入"
    importRef.value.upload.data = {
      couponId: queryParams.couponId,
      total: couponsTotal.value
    }
    importRef.value.upload.url = import.meta.env.VITE_APP_BASE_API + "/cj-stadium/sys/coupon/user/import"
  }
}

// 表格多选
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val
}

// 确定用户
const handleSureUser = () => {
  dialogVisible.value = false
  emit("refreshShow", {
    type: "chooseUser",
    userTotal: list.value.length,
  })
}

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
}

// 批量删除
const handleDelUser = () => {
  if (multipleSelection.value.length <= 0) {
    ElMessage.warning("请选择要删除的数据")
    return
  }
  const ids = multipleSelection.value.map((item: any) => item.id)
  ElMessageBox.confirm(`确认要删除吗？`)
    .then(() => {
      deleteCouponsUser(ids).then((res: any) => {
        ElMessage.success(res.msg)
        getList()
      })
    })
    .catch(() => {})
}

// 暴露方法给父组件
defineExpose({
  init
})
</script>

<style scoped lang="scss">
:deep(.el-dialog) {
  border-radius: 6px;
  .el-dialog__header {
    border-radius: 6px 6px 0 0;
    background: rgba(243, 244, 246, 1);
    padding: 12px 15px;
    .el-dialog__title {
      font-size: 14px;
      color: #383838;
    }
  }
  .el-dialog__body {
    padding: 10px 15px 6px;
  }
  .el-form-item {
    margin-bottom: 15px;
  }
  .el-table thead tr th.el-table__cell {
    padding: 11px 0;
    font-size: 14px;
  }
  .pagination-container {
    margin-top: 13px;
  }
}
</style>
